<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${ctx!}/assets/icons/logo.png">

    <title>盛世节能数据中心</title>

    <!-- Bootstrap core CSS -->
    <link href="${ctx!}/assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="${ctx!}/assets/dist/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="${ctx!}/assets/css/header.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/hide-sidebar.css" rel="stylesheet">
    <link rel="stylesheet" href="${ctx!}/assets/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx!}/assets/css/sidebar-menu.css">


    <link rel="stylesheet" href="${ctx!}/assets/css/index.css">


    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="${ctx!}/assets/dist/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="${ctx!}/assets/dist/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> -->

    <!-- Bootstrap core JavaScript
   ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="${ctx!}/assets/dist/js/vendor/holder.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="${ctx!}/assets/dist/js/ie10-viewport-bug-workaround.js"></script>
    <![endif]-->

    <script src="${ctx!}/assets/js/sidebar-menu.js"></script>
    <script src="${ctx!}/assets/js/datatime.js"></script>
    <script type="application/javascript" src="${ctx!}/assets/js/current.js"></script>
    <#--<script type="text/javascript" src="${ctx!}/assets/js/index.js"></script>-->
    <style>
        .dropdown-toggle.count-info {
            padding: 15px !important;
            color: white !important;
            font-size: 14px !important;
        }

        .dropdown-toggle.count-info:hover, .dropdown-toggle.count-info:focus {
            background: none;
        }

        .nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
            background: none;
        }

        #fullScreenBtn {
            margin: 10px;
            background-color: rgb(22, 33, 51);
        }

        #fullScreenBtn span {
            color: #9D9D9D;
        }

        #fullScreenBtn:hover span {
            color: #FFFFFF;
        }

        .container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body style="background-image: url(${ctx!}/assets/img/background.png)">

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed clear" data-toggle="collapse"
                            data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="${ctx!}/index">
                        <div><img src="${ctx!}/assets/icons/logo.png"></div>
                        <div>盛世节能数据中心</div>
                    </a>
                    <br clear="left"/>
                </div>
            </div>
            <div class="col-sm-9  col-md-7">
                <div id="navbar navbar-top-ul" class="navbar-collapse collapse">
                    <ul id="center-ul" class="nav navbar-nav clear">
                        <li class="current"><a href="${ctx!}/web/project/index" target="frame">系统首页</a></li>
                        <@shiro.hasPermission name="system:data:index">
                            <li id="device-monitor"><a href="${ctx!}/web/project/device" target="frame">设备监测</a></li>
                        </@shiro.hasPermission>
                        <@shiro.hasPermission name="system:data:index">
                            <li><a href="${ctx!}/web/project/livedata" target="frame">数据报表</a></li>
                        </@shiro.hasPermission>
                        <@shiro.hasPermission name="system:alarm:index">
                            <li><a href="${ctx!}/web/project/alarm" target="frame">运维管理</a></li>
                        </@shiro.hasPermission>
                        <@shiro.hasPermission name="system:usage:index">
                            <li><a href="${ctx!}/web/project/usage/index" target="frame">能耗统计</a></li>
                        </@shiro.hasPermission>
                        <li><a href="#">视频监控</a></li>
                    </ul>

                    <br clear="left"/>
                </div>
            </div>


            <div class="hidden-sm	 col-md-2" style="margin-left: -100px">
                <div class="navbar-brand" id="datetime">
                    <span id="nowDateTimeSpan"></span>
                </div>
            </div>
            <div class="hidden-sm	 col-md-1">
                <div class="row border-bottom">
                    <ul class="nav navbar-top-links navbar-right">
                        <li class="dropdown">
                            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#" style="display: inline-block;width:120px;margin-left: 30px;z-index: 5">
                                <i class="fa fa-user"></i><span class="label label-primary"></span>【<@shiro.principal type="cn.edu.seu.ssny.entity.User" property="userName"/>】
                            </a>
                            <ul class="dropdown-menu dropdown-alerts">
                                <li>
                                    <a href="${ctx!}/admin/logout">
                                        <div>
                                            <i class="fa fa-remove"></i> 注销
                                            <span class="pull-right text-muted small"><@shiro.principal type="cn.edu.seu.ssny.entity.User" property="userName"/></span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div>
                <img id="fullScreenBtn" src="${ctx!}/assets/img/open_full.png" onclick="launchFullscreen();" style="float: right;margin-right: 0px;margin-top: 10px;width: 30px;height: 30px;margin-left:50px;cursor:pointer;z-index: 6">
            </div>

        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="overlay col-sm-3 col-md-2 sidebar">
            <ul class="first sidebar-menu">
                <li class="first treeview">
                    <a class="first" href="#">
                        <div class="fa icn"><img src="${ctx!}/assets/icons/项目管理.png"></div>
                        <div>项目中心</div>
                        <div class="fa fa-angle-left pull-right"></div>
                    </a>
                    <!--<div class="right"><img src="icons/右框.png"></div>-->
                    <ul class="second project-tree treeview-menu menu-open">
                        <#if (projects?size>0) >
                            <#list projects as project>
                                <li class="second J_menuItem">
                                    <a class="second" href="${ctx!}/web/project/${project.id}" target="frame"><i
                                                class="fa fa-circle"></i>${project.name}</a>
                                </li>
                                <ul class="third treeview-menu">
                                    <#if (project.equipments?size>0) >
                                        <#list project.equipments as equipment>
                                            <#if (equipment.display?string('yes', 'no'))=='yes'>
                                                <li class="third J_menuItem"><a class="third"
                                                                                href="${ctx!}/web/project/device/${project.id}/${equipment.id}"
                                                                                target="frame"><i
                                                                class="fa fa-circle"></i>${equipment.name}</a></li>
                                            </#if>
                                        </#list>
                                    </#if>
                                </ul>
                            </#list>
                        </#if>
                    </ul>
                </li>
                <@shiro.hasPermission name="system:user:index">
                    <li class="first treeview">
                        <a class="first" href="${ctx!}/web/user/index" target="frame">
                            <div class="fa icn"><img src="${ctx!}/assets/icons/用户管理.png"></div>
                            <div>用户管理</div>
                        </a>
                    </li>
                </@shiro.hasPermission>
                <li class="first treeview">
                    <a class="first" href="#">
                        <div class="fa icn"><img src="${ctx!}/assets/icons/数据分析.png"></div>
                        <div>数据分析</div>
                    </a>
                    <ul class="second project-tree treeview-menu menu-open">
                        <#--                        <li class="second J_menuItem" >-->
                        <#--                            <a class="second" href="${ctx!}/web/analysis/efficiency"  target="frame"><i class="fa fa-circle"></i>能耗分析</a>-->
                        <#--                        </li>-->
                        <#--                        <li class="second J_menuItem" >-->
                        <#--                            <a class="second" href="${ctx!}/web/analysis/efficiency"  target="frame"><i class="fa fa-circle"></i>负载分析</a>-->
                        <#--                        </li>-->
                        <li class="second J_menuItem">
                            <a class="second" href="${ctx!}/web/analysis/efficiency" target="frame"><i
                                        class="fa fa-circle"></i>能效分析</a>
                        </li>
                        <li class="second J_menuItem">
                            <a class="second" href="${ctx!}/web/analysis/pipenet" target="frame"><i
                                        class="fa fa-circle"></i>管网分析</a>
                        </li>
                        <li class="second J_menuItem">
                            <a class="second" href="${ctx!}/web/analysis/heat-balance" target="frame"><i
                                        class="fa fa-circle"></i>热平衡分析</a>
                        </li>
                        <#--                        <li class="second J_menuItem" >-->
                        <#--                            <a class="second" href="${ctx!}/web/analysis/efficiency"  target="frame"><i class="fa fa-circle"></i>其他</a>-->
                        <#--                        </li>-->
                    </ul>
                </li>
                <@shiro.hasPermission name="system:log:index">
                    <li class="first treeview">
                        <a class="first" class="J_menuItem" href="${ctx!}/web/log/index" target="frame">
                            <div class="fa icn"><img src="${ctx!}/assets/icons/操作日志.png"></div>
                            <div>操作日志</div>
                        </a>
                    </li>
                </@shiro.hasPermission>
                <@shiro.hasPermission name="system:data:index">
                    <li class="first treeview">
                        <a class="first" href="${ctx!}/web/modifydata/index" target="frame">
                            <div class="fa icn"><img src="${ctx!}/assets/icons/数据补录.png"></div>
                            <div>数据补录</div>
                        </a>
                    </li>
                </@shiro.hasPermission>
                <@shiro.hasPermission name="system:admin:index">
                    <li class="first treeview">
                        <a class="first" href="${ctx!}/admin">
                            <div class="fa icn"><img src="${ctx!}/assets/icons/后台管理.png"></div>
                            <div>后台管理</div>
                        </a>
                    </li>
                </@shiro.hasPermission>
            </ul>
        </div>
        <div class="J_mainContent col-md-offset-2 col-md-10" style="padding-right: 5px; padding-left: 5px">
            <button type="button" class="hamburger is-closed  animated fadeInLeft"
                    data-toggle="offcanvas">
                <span class="hamb-top"></span>
                <span class="hamb-middle"></span>
                <span class="hamb-bottom"></span>
            </button>
            <iframe id="J_iframe" name="frame" width="100%" frameborder="0"
                    onload="changeFrameHeight()"></iframe>
        </div>
    </div>
</div>

<script>
    $.sidebarMenu($('.sidebar-menu'));

    $(document).ready(function () {
        console.log("start");
        $('iframe').attr('height', ($(document.body).height()) + "px");
        // 第一个li active
        <#if (projects?size>0) >
        $('.sidebar-menu li:first-child').addClass('active');
        $('.project-tree li:first-child').addClass('active');
        $("#J_iframe").attr('src', $('.project-tree li:first-child a').attr('href'));
        </#if>

        var trigger = $('.hamburger'),
            overlay = $('.overlay'),
            mainContent = $('.J_mainContent'),
            isClosed = true;

        trigger.click(function () {
            hamburger_cross();
        });

        function hamburger_cross() {
            if (isClosed == true) {
                overlay.hide();
                // trigger.removeClass('is-open');
                trigger.addClass('closed-margin');
                mainContent.removeClass('col-md-offset-2');
                mainContent.addClass('full-width');
                isClosed = false;
            } else {
                overlay.show();
                trigger.removeClass('closed-margin');
                // trigger.addClass('is-open');
                mainContent.removeClass('full-width');
                mainContent.addClass('col-md-offset-2');
                isClosed = true;
            }
            document.getElementById("J_iframe").contentWindow.location.reload() //重新加载
        }

        $('[data-toggle="offcanvas"]').click(function () {
            $('#wrapper').toggleClass('toggled');
        });

        function changeFrameHeight() {
            var ifm = document.getElementById("J_iframe");
            ifm.height = document.documentElement.clientHeight;
        }
    });

    function changeFrameHeight() {
        var ifm = document.getElementById("J_iframe");
        ifm.height = document.documentElement.clientHeight;
    }

    var isFullscreen = false;

    function launchFullscreen() {
        var element = document.documentElement;
        var btn = document.getElementById('fullScreenBtn');
        if (isFullscreen == false) {
            // to full screen
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
            btn.innerHTML = "<span>关闭全屏</span>";
            // $('iframe').attr('height',($(document.body).height()) +"px");
        } else {
            // quit full screen
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
            btn.innerHTML = "<span>启动全屏</span>";
            // $('iframe').attr('height',((window.innerHeight - 50) +"px"));
        }
        document.getElementById("J_iframe").contentWindow.location.reload() //重新加载
        isFullscreen = !isFullscreen;
    }


    window.onresize = function () {
        changeFrameHeight();

    }

</script>
</body>
</html>
